<template>
  <el-card>
    <template #header>
      <span>{{ isEdit ? '编辑' : '新增' }}药品规则</span>
    </template>

    <el-form
      ref="formRef"
      :model="form"
      label-width="150px"
      class="form-container"
      :rules="rules"
    >
      <el-form-item label="知识点序号" prop="serialNumber">
        <el-input v-model="form.serialNumber" placeholder="请输入知识点序号" />
      </el-form-item>
      <el-form-item label="药品通用名" prop="itemName">
        <el-input v-model="form.itemName" placeholder="请输入药品通用名" />
      </el-form-item>
      <el-form-item label="是否2024医保目录" prop="is2024Medical">
        <el-radio-group v-model="form.is2024Medical">
          <el-radio label="1">是</el-radio>
          <el-radio label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="限定性别" prop="limitGender">
        <el-select v-model="form.limitGender" placeholder="请选择限定性别">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
      <el-form-item label="药品代码数量" prop="drugCodeCount">
        <el-input v-model.number="form.drugCodeCount" placeholder="请输入药品代码数量" />
      </el-form-item>
      <el-form-item label="检出逻辑" prop="detectLogic">
        <el-input v-model="form.detectLogic" placeholder="请输入检出逻辑" />
      </el-form-item>
      <el-form-item label="逻辑依据" prop="logicBasis">
        <el-input v-model="form.logicBasis" type="textarea" rows="3" placeholder="请输入逻辑依据" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="$router.back()">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import drugApi from '@/api/drugApi.ts'

// 路由实例
const route = useRoute()
const router = useRouter()
const isEdit = ref(route.name === 'DrugEdit') // 判断是否为编辑页
const formRef = ref(null) // 表单引用

// 表单数据
const form = reactive({
  id: '',
  serialNumber: '',
  itemName: '',
  is2024Medical: '1', // 默认是2024医保目录
  limitGender: '',
  drugCodeCount: 0,
  detectLogic: '',
  logicBasis: ''
})

// 表单验证规则
const rules = {
  serialNumber: [{ required: true, message: '请输入知识点序号', trigger: 'blur' }],
  itemName: [{ required: true, message: '请输入药品通用名', trigger: 'blur' }],
  limitGender: [{ required: true, message: '请选择限定性别', trigger: 'change' }],
  drugCodeCount: [
    { required: true, message: '请输入药品代码数量', trigger: 'blur' },
    { type: 'number', message: '请输入数字', trigger: 'blur' }
  ],
  logicBasis: [{ required: true, message: '请输入逻辑依据', trigger: 'blur' }]
}

// 编辑页加载详情
const loadDetail = async () => {
  try {
    const res = await drugApi.getDrugDetail(route.params.id)
    // 填充表单数据（res 是后端返回的业务数据）
    Object.assign(form, res)
  } catch (err) {
    // 错误已在拦截器提示，返回列表页
    router.back()
  }
}

// 提交表单
const submitForm = async () => {
  // 表单验证
  await formRef.value.validate()

  try {
    if (isEdit.value) {
      // 编辑：调用更新接口
      await drugApi.editDrug(form)
      ElMessage.success('编辑成功')
    } else {
      // 新增：调用新增接口
      await drugApi.addDrug(form)
      ElMessage.success('新增成功')
    }
    // 提交成功后返回列表页
    router.push('/drug/list')
  } catch (err) {
    // 错误已在拦截器提示，无需额外处理
  }
}

// 初始化：编辑页加载数据
onMounted(() => {
  if (isEdit.value) {
    loadDetail()
  }
})
</script>

<style scoped>
.form-container {
  max-width: 800px;
  margin: 20px auto;
}
</style>
